<template>
  <div class="container">
    <div class="download-container">
      <div class="download-right">
        <section class="content">
          <div class="logo">
            <img src="@/assets/imgs/download/logo.webp" alt="logo" />
          </div>
          <div class="title">
            <img src="@/assets/imgs/download/title.webp" alt="title" />
          </div>
          <div class="sub_title">
            <p>网红女神赛事直播 行业专家赛前预测 体育视听盛宴 万千佳人相伴</p>
          </div>
          <div class="download_content">
            <div class="top">
              <div class="qrcode">
                <img src="@/assets/imgs/download/download-qr.png" alt="qrcode" />
              </div>
              <div class="button_list">
                <div class="button_item">
                  <img src="@/assets/imgs/download/ios.webp" alt="ios" />
                  <span>iOS企业版-有料版</span>
                </div>
                <div class="button_item">
                  <img src="@/assets/imgs/download/android.webp" alt="android" />
                  <span>Android-有料版</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <span> 扫码下载 </span>
              <span>官方网址：www.dtiyu.com</span>
            </div>
          </div>
        </section>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import Footer from '@/components/footer.vue'
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 678px;
  min-width: 1400px;
  background: url('@/assets/imgs/download/bg.webp') no-repeat;
  background-size: 100% auto;
  background-color: #f5f5f5;
  .download-container {
    width: 1400px;
    margin: 0 auto;
    height: 678px;
    // background-color: #f5f5f5;

    background-size: 100%;
    .download-right {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      flex-direction: column;
      .content {
        width: 600px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 60px;
        .logo {
          width: 194px;
          height: 80px;
        }
        .title {
          width: 600px;
          height: 67px;
          margin-top: 20px;
        }
        .sub_title {
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 800;
          font-size: 28px;
          color: #525a79;
          width: 458px;
          text-align: center;
          padding: 20px 0;
        }
        .download_content {
          .top {
            background-color: #fff;
            width: 368px;
            height: 160px;
            border-radius: 20px 20px 0 0;
            display: flex;
            // flex-direction: column;
            align-items: center;
            justify-content: center;
            .qrcode {
              width: 120px;
              height: 120px;
              background: #cacaca;
              border-radius: 12px 12px 12px 12px;
              border: 1px solid #16b13a;
              //   margin-top: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              img {
                width: 90%;
                height: 90%;
              }
            }
            .button_list {
              width: 200px;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .button_item {
                width: 188px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: url('@/assets/imgs/download/button.webp') no-repeat;
                background-size: 100% 100%;
                &:first-child {
                  margin-bottom: 10px;
                }
                img {
                  width: 16px;
                  height: 16px;
                  margin-right: 5px;
                }
                span {
                  font-family:
                    PingFang SC,
                    PingFang SC;
                  font-weight: 500;
                  font-size: 14px;
                  color: #ffffff;
                }
              }
            }
          }
          .bottom {
            // margin-top: 10px;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #525a79;
            display: flex;
            // flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 40px;
            background: #f6f8ff;
            border-radius: 0 0 20px 20px;
            // padding: 0 20px;
            span {
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #525a79;
              //   flex: 1;
              text-align: center;
              width: 120px;
              &:last-child {
                width: 200px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
